<script setup lang="ts">
import { computed, ref } from 'vue'
import { demoList } from './initData'

const activeId = ref<string>(demoList[18].id)
const activeItem = computed(() => demoList.find((item) => item.id === activeId.value))
</script>

<template>
  <div class="index-page">
    <div class="navigation-list">
      <div
        v-for="item in demoList"
        :key="item.id"
        class="item"
        :class="{ 'item--active': item.id === activeId }"
        @click="activeId = item.id"
      >
        {{ `${item.id}. ${item.name}` }}
      </div>
    </div>
    <div class="demo-show">
      <component :is="activeItem?.component"></component>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index-page {
  display: flex;
  height: 100vh;
  .navigation-list {
    width: 250px;
    height: 100%;
    border-right: 1px solid #eee;
    .item {
      box-sizing: border-box;
      width: 100%;
      height: 28px;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      font-size: 12px;
      border-bottom: 1px solid #eee;
      padding: 0px 8px;
      transition: all 0.3s ease;
      &:hover {
        background-color: #eee;
      }
      &.item--active {
        background-color: #ccc;
      }
    }
  }
  .demo-show {
    width: calc(100vw - 250px);
    height: 100%;
  }
}
</style>
